<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
--> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <link rel="stylesheet" href="css/eggplant/jquery-ui-1.8.18.custom.css" type="text/css">
	<script src="js/jquery-1.7.2.min.js" type="text/javascript" ></script>
	<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	<script src="js/studentvoice.js" type="text/javascript"></script>
	<script src="js/ClassDiagramPlugin.js" type="text/javascript"></script>
	<style>
		.divsize { width:50px;height:50px;border:1px solid black; float:left }
		.leftround { border-top-left-radius:15px;border-bottom-left-radius:15px }
		.rightround { border-top-right-radius:15px;border-bottom-right-radius:15px }
	</style>
    
    <title> 
      Professor Class Monitor
    </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['imagechart']});
    </script> 
    <script type="text/javascript"> 
      // This function applies color formatting to a bar chart,
      // by calculating the color of each bar based on the data.
      function drawVisualization(studentCols,numOfStudents) {
 //     	 alert("??");
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string');
        data.addColumn('number');
 

 		if(!numOfStudents) {
 			numOfStudents=27;
 		}
 		
 		var chartCols = new Array(studentCols.length); 
 		var i=1;
 		
 		for (var colVal in studentCols){
 			var val=studentCols[colVal]*100/numOfStudents;
 			chartCols[i-1] = [i.toString(), val];
 			i++;
 		}
		//alert(i);
 		//data.addRows([['1',2],['3',4]]);
 		//alert(chartCols);
        data.addRows(chartCols);
        
        var red = 'ff0000';
        var green = '00ff00';
        var yellow = 'ffff00';
        
        // Loop over the data table to create the color specification. 
        var colors = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
          var value = data.getValue(i, 1);
          var color = value < 22 ? green : (value < 50 ? yellow : red);
          colors.push(color);
        }
        colors = colors.join('|');
      
        var options = {cht: 'bvs', chco: colors, max: 100};
      
        // Create and draw the visualization.
        new google.visualization.ImageChart(document.getElementById('visualization')).
          draw(data, options);  
      }

      //google.setOnLoadCallback(function() {drawVisualization(0)});
      
      function updateSubject(key) {
      	
      		//topics=document.getElementById("topics").childNodes;
			//len=topics.length;
      		
      		curr=document.getElementById("currSubject");
      		next=document.getElementById("nextSubject");
      		
      		for(var index in topics) {
      			if(topics[index].key == key) {
      				curr.value=topics[index].name + " " + topics[index].time;
      				
      				if(index+1 < len) {
      					x.value=topics[index+1].name + " " + topics[index+1].time;
      				} else {
      					x.value="END";	
      				}
      				break;
      			}
      		}
      }
    </script> 
	

<script type="text/javascript">
$(document).ready(function(){
	initFromServer();
	refreshChart();
});

function refreshChart(){
//	alert("?????");
	if(!quizOn) {
	$.getJSON('getClassData', function(data) {
		
		console.log(data);
		
		var decData=eval(data);
		drawVisualization(decData.studentCols,decData.numOfStudents);
		
		var subjectIndex=decData.subjectInd;
		updateSubject(subjectIndex);		
	});
	} else {
	$.getJSON('requestQuizData', function(data) {
		
		console.log(data);
		
		var decData=eval(data);
		drawVisualization(decData.studentCols,decData.numOfStudents);
	});
	}
	
	
}

var topics;
function initFromServer() {
	
	$.getJSON('profHQinit', function(data) {
		console.log(data);
		
		if(!data) {
		data=["Dude, Wheres my car?", "Are you fuckin kiddin me?"]; }
		
		var select = document.getElementById("questions");
		var questions=eval(data);
		for(index in questions) {
   			select.options[select.options.length] = new Option(questions[index], index);		
		}
	});	
	$.getJSON('getClassLayoutData', function(data) {

		topics=eval(data);
		console.log(topics);
		
		for(index in topics) {
		// This is the <ul id="myList"> element that will contains the new elements
		var container = document.getElementById('topics');
		// Create a new <li> element for to insert inside <ul id="myList">
		var new_element = document.createElement('li');
		new_element.innerHTML = topics[index].name + " - " + topics[index].time + "minutes";
		container.appendChild(new_element);
		}
	});
}

setInterval( "refreshChart()", 10*1000 );
</script> 

<script type="text/javascript">

var quizOn=false;

function launchQuiz() {
	var x=document.getElementById("questions").selectedIndex;	
	var questInd=x;
	
	var act="Launch";
	var quizButt = document.getElementById("quizButton");
	
	if(quizOn) {
		act="Stop";
	}
	
	console.log("action: " + act +", questionIndex: " + questInd)
	
	$.getJSON('quizLauncher', { action: act , questionIndex: questInd },
	 function(data) {
		console.log(data);
		
		dataDec=eval(data);
		
		if(dataDec==true) {
			quizOn=!quizOn;
			
			if(quizOn) {
				quizButt.value="End quiz!";
			} else {
				quizButt.value="Launch Quiz Question";
			}
			
			//alert(dataDec.message);
		} else {	
			//alert(dataDec.message);
		}
	});	
}

function launchNextSubject() {
	$.get('/updateClassState', null,
	 function(data) {
    console.log(data);
    //alert('success');
	 });
}
</script> 

 </head> 
  
  <body>
  	
  <h1>Professor HQ - Live Data Flow</h1>
  	
  <div id="visualization" style="width: 300px; height: 300px;"></div> 
  
    Current Subject: <input id="currSubject" type="text" value="" readonly="true" disabled="true" />
    Next Subject: <input id="nextSubject" type="button" value="" readonly="true" onclick="launchNextSubject()" />
    <br>
    <select id="questions"></select>
   	<input id="quizButton" type="button" value="Launch Quiz" onclick="launchQuiz()"/>
	
    <ul id="topics"></ul>
        
    </body> 
    
</html>
